<template>
  <div id="pageLinkList">
    <v-container grid-list-xl fluid>
      <v-layout row warp>
        <v-flex xs12>
          <v-card class="mb-4">
            <v-toolbar color="primary lighten-1" dark flat dense cad>
              <v-toolbar-title class="subheading">外链管理</v-toolbar-title>
              <v-spacer></v-spacer>
              <v-dialog v-model="dialog" persistent max-width="600px">
                <v-btn slot="activator" flat dark>
                  <v-icon>add</v-icon>&nbsp;新建
                </v-btn>
                <v-card>
                  <v-card-title>
                    <span class="headline">{{ formTitle }}</span>
                  </v-card-title>
                  <v-card-text>
                    <v-container grid-list-md>
                      <v-form>
                        <v-layout wrap>
                          <v-flex xs12>
                            <v-text-field
                              name="name"
                              label="名称*"
                              v-validate="'required'"
                              data-vv-as="名称"
                              data-vv-validate-on="blur"
                              :error="errors.has('name')"
                              :error-messages="errors.collect('name')"
                              v-model="editedItem.name"
                            ></v-text-field>
                          </v-flex>
                          <v-flex xs12>
                            <v-text-field
                              name="direct"
                              label="链接*"
                              v-validate="'required|url'"
                              data-vv-as="链接"
                              data-vv-validate-on="blur"
                              :error="errors.has('direct')"
                              :error-messages="errors.collect('direct')"
                              v-model="editedItem.direct"
                            ></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-form>
                    </v-container>
                  </v-card-text>
                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue darken-1" flat @click="close">取消</v-btn>
                    <v-btn color="blue darken-1" flat @click="save">保存</v-btn>
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </v-toolbar>
            <v-divider></v-divider>
            <v-card-text>
              <v-data-table :headers="headers" :items="links">
                <template slot="items" slot-scope="props">
                  <td>{{ props.item.id }}</td>
                  <td class="text-xs-right">{{ props.item.name }}</td>
                  <td class="text-xs-right">{{ props.item.direct }}</td>
                  <td class="text-xs-right">
                    <v-tooltip bottom>
                      <v-btn flat icon color="green" slot="activator" @click="editItem(props.item)">
                        <v-icon small>edit</v-icon>
                      </v-btn>
                      <span>编辑</span>
                    </v-tooltip>
                    <v-tooltip bottom>
                      <v-btn flat icon color="red" slot="activator" @click="deleteItem(props.item)">
                        <v-icon small>delete</v-icon>
                      </v-btn>
                      <span>删除</span>
                    </v-tooltip>
                  </td>
                </template>
              </v-data-table>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>
<script>
import { getAllLinks, createLink, updateLink, deleteLink } from '@/api/resource/links'
import Toast from '@/plugins/toast'
export default {
  name: 'link-list',
  data: () => ({
    dialog: false,
    headers: [
      { text: '#', value: 'id', align: 'left', sortable: false },
      { text: '名称', value: 'name', align: 'right' },
      { text: '链接', value: 'direct', align: 'right' },
      { text: '操作', value: 'action', align: 'right' }
    ],
    links: [],
    loading: true,
    pagination: {
      count: 0,
      current_page: 1,
      links: [],
      per_page: 15,
      total: 0,
      total_pages: 1
    },
    editedIndex: -1,
    editedItem: {
      id: null,
      name: '',
      direct: ''
    },
    defaultItem: {
      id: null,
      name: '',
      direct: ''
    }
  }),
  computed: {
    formTitle () {
      return this.editedIndex === -1 ? '新建友链' : '编辑友链'
    }
  },
  watch: {
    dialog (val) {
      val || this.close()
    }
  },
  methods: {
    init () {
      let _this = this
      getAllLinks().then(res => {
        _this.links = res.data
        // todo:分页
        // _this.pagination = res.meta.pagination
      })
    },
    editItem (item) {
      let _this = this
      _this.editedIndex = _this.links.indexOf(item)
      _this.editedItem = Object.assign({}, item)
      _this.dialog = true
    },
    deleteItem (item) {
      let _this = this
      const index = _this.links.indexOf(item)
      confirm('确定删除吗?') && deleteLink(item.id).then(res => {
        _this.links.splice(index, 1)
        Toast.success({ msg: '删除成功' })
      })
    },
    save () {
      let _this = this
      let index = _this.editedIndex
      let item = _this.editedItem
      _this.$validator.validateAll().then(result => {
        if (result) {
          if (index > -1) {
            updateLink(item.id, item).then(res => {
              Object.assign(_this.links[index], item)
              Toast.success({ msg: '修改成功' })
            })
          } else {
            createLink(item).then(res => {
              _this.links.push(res.data)
              Toast.success({ msg: '添加成功' })
            })
          }
          _this.close()
        }
      })
    },
    close () {
      let _this = this
      _this.dialog = false
      _this.editedItem = Object.assign({}, _this.defaultItem)
      _this.editedIndex = -1
    }
  },
  created () {
    this.init()
  }
}
</script>
